<template>
    <div class="p-2">
        <el-card shadow="never">
            <template #header>
                <el-button @click="$router.back()" type="danger" icon="Back" plain>返回</el-button>
            </template>

            <el-row>
                <el-col :span="12">
                    <!-- 表格 -->
                    <table class="order-table">
                        <tr>
                            <td>流程</td>
                            <td>制单</td>
                            <td>餐具盒定制</td>
                            <td>生日帽定制</td>
                            <td>不锈钢定制</td>
                            <td>通用部件</td>
                            <td>包装件</td>
                            <td>成品组装</td>
                        </tr>
                        <tr>
                            <td>操作</td>
                            <td>已完成</td>
                            <td>未开始</td>
                            <td>未开始</td>
                            <td>无</td>
                            <td>未开始</td>
                            <td>无包装件</td>
                            <td @click="finishedShow=true">未开始</td>
                        </tr>
                        <tr>
                            <td colspan="8">电商部餐具成品组装单</td>
                        </tr>
                        <tr>
                            <td>产品图片</td>
                            <td colspan="7">
                                <img style="width: 200px;"
                                    src="https://plus.unsplash.com/premium_photo-1725708358944-844db020a73a?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                                    alt="">
                            </td>
                        </tr>
                        <tr>
                            <td>产品名称</td>
                            <td colspan="3">产品名称</td>
                            <td>制单日期</td>
                            <td colspan="3">制单日期</td>
                        </tr>
                        <tr>
                            <td>产品名称</td>
                            <td colspan="3">产品名称</td>
                            <td>制单日期</td>
                            <td colspan="3">制单日期</td>
                        </tr>
                        <tr>
                            <td>产品名称</td>
                            <td colspan="3">产品名称</td>
                            <td>制单日期</td>
                            <td colspan="3">制单日期</td>
                        </tr>
                        <tr>
                            <td>产品名称</td>
                            <td colspan="3">产品名称</td>
                            <td>制单日期</td>
                            <td colspan="3">制单日期</td>
                        </tr>
                        <tr>
                            <td>所属子公司</td>
                            <td colspan="3">产品名称</td>
                            <td>产品款式</td>
                            <td colspan="3">制单日期</td>
                        </tr>
                        <tr>
                            <td>备注</td>
                            <td colspan="7">备注</td>
                        </tr>
                        <tr>
                            <td>工费</td>
                            <td colspan="7">工费</td>
                        </tr>
                    </table>
                </el-col>
                <el-col :span="12">
                    <!-- 表格 -->
                    <table class="order-table">
                        <tr>
                            <td colspan="10">生产流程信息</td>
                        </tr>
                        <tr>
                            <td colspan="10">
                                <el-table :data="tableData">
                                    <el-table-column prop="date" label="工序" />
                                    <el-table-column prop="name" label="开始日期" />
                                    <el-table-column prop="date" label="开始时间" />
                                    <el-table-column prop="name" label="操作人" />
                                    <el-table-column prop="date" label="结束日期" />
                                    <el-table-column prop="name" label="结束时间" />
                                    <el-table-column prop="date" label="操作人" />
                                    <el-table-column prop="name" label="完工数量" />
                                </el-table>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="10">产品配件信息</td>
                        </tr>
                        <tr>
                            <td>产品大类</td>
                            <td>产品小类</td>
                            <td colspan="2">产品名称</td>
                            <td>总需数量</td>
                            <td>配货数量</td>
                            <td>是否替换</td>
                            <td colspan="2">替换部件名称</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>产品大类</td>
                            <td>产品小类</td>
                            <td colspan="2">产品名称</td>
                            <td>总需数量</td>
                            <td>配货数量</td>
                            <td>是否替换</td>
                            <td colspan="2">替换部件名称</td>
                            <td></td>
                        </tr>
                    </table>
                </el-col>
            </el-row>
        </el-card>

        <FinishedProductAssembly  :visible="finishedShow" @close="finishedShow = false" />
    </div>
</template>
<script setup lang="ts">
import FinishedProductAssembly from './components/finishedProductAssembly.vue'

const finishedShow = ref(false);

const tableData = [
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
]
</script>
<style lang="scss" scoped>
.order-table {
    border-spacing: 0;
    border: 1px solid #BFBFBF;
    width: 100%;
    font-size: 20px;

    tr {
        border: 1px solid #BFBFBF;
    }

    td:not(.step-col) {
        border: 1px solid #BFBFBF;
        text-align: center;
    }

    .step-col {
        border: 1px solid #BFBFBF;
        padding: 10px 10px 0 10px;
    }
}
</style>